<script setup>
import {
  title,
  dialogShow,
  ruleFormRef,
  rules,
  formData,
  templateTypeList,
  transportTypeList,
  addTemplate,
  handleClose
} from '/src/components/Dialog/Dialog.js'
</script>

<template>
  <el-dialog
      v-model="dialogShow"
      width="600"
      :before-close="handleClose"
  >
    <template #header="{titleId, titleClass }">
      <span :id="titleId" :class="titleClass">{{ title }}</span>
    </template>
    <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="formData"
        style="max-width: 600px"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="模板类型" prop="templateType">
        <el-select v-model="formData.templateType" placeholder="请选择模板类型">
          <el-option
              v-for="item in templateTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运送类型" prop="transportType">
        <el-select v-model="formData.transportType" placeholder="请选择运送类型">
          <el-option
              v-for="item in transportTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!--      新增模板显示这个-->
      <el-form-item v-if="title==='新增模板'" label="运送类型" prop="associatedCityList">
        <span>{{ formData.associatedCityList[0] ? '全国' : '' }}</span>
      </el-form-item>
      <!--      编辑模板显示这个-->
      <el-form-item v-else label="运送类型" prop="associatedCityList">
        <el-checkbox-group v-model="formData.associatedCityList">
          <el-checkbox label="全国" value="1"/>
          <el-checkbox label="京津冀" value="2"/>
          <el-checkbox label="江浙沪" value="3"/>
          <el-checkbox label="川渝" value="4"/>
          <el-checkbox label="黑吉辽" value="5"/>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="首重价格" prop="firstWeight">
        <el-input placeholder="请输入首重价格" v-model="formData.firstWeight">
          <template #suffix>
            <span>元</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="续重价格" prop="continuousWeight">
        <el-input placeholder="请输入续重价格" v-model="formData.continuousWeight">
          <template #suffix>
            <span>元</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
        <el-input placeholder="请输入轻抛系数" v-model="formData.lightThrowingCoefficient">

        </el-input>
      </el-form-item>
      <div class="dialogBtn">
        <el-button @click="handleClose()">取消</el-button>
        <el-button @click="addTemplate(ruleFormRef)">确认</el-button>
      </div>
    </el-form>

  </el-dialog>
</template>

<style scoped lang="less">
.el-dialog {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form {
    padding: 20px;

    .el-form-item {
      margin-bottom: 30px;

      ::v-deep(.el-input__inner), ::v-deep(.el-select__wrapper) {
        height: 40px;
      }
    }

    .dialogBtn {
      text-align: center;
    }
  }
}
</style>
